<template>
  <div class="app">
    <div class="baseboard" :style="{backgroundImage:'url('+form.avatar +')'}"></div>
    <div class="app-header">
      <div style="display: flex">
        <van-image
          width="80"
          height="80"
          style="margin-left: 15px;"
          :src="form.avatar"
       @click="show = true"
        />
        <div class="app-header-right">
          <span style="margin-bottom: 6px"
            ><span style="background: #f01414; padding: 4px; margin-right: 8px"
              >品牌</span
            ><span style="font-size: 18px">{{form.name}}</span></span
          >
          <span style="margin-bottom: 6px">美团专送/{{form.deliveryTime}}分钟送达</span>
              <div style=" display:flex">
     <span style=" background: #fff;
                padding: 0 3px;
                color: #f79292;
                margin-right: 8px;
              ">减</span> 
              <span class="app-menu">
                <span v-for="item in form.supports" :key="item" style="margin-right:5px">{{item}}</span>

              </span>
 </div>
        </div>
      </div>
      <div class="app-header-bottom">
<van-notice-bar
  left-icon="volume-o"
  :text="form.bulletin"
/>
      </div>
    </div>
    <div class="app-content">
   <van-tabs title-active-color="#FAC81D" color="#FAC81D"  >
  <van-tab title="商品" to="/" ></van-tab>
  <van-tab title="评价" to="/evaluate" ></van-tab>
  <van-tab title="商家" to="/store"></van-tab>
</van-tabs>
      <router-view />
    <!-- 购物车 -->
      <div class="app-bottom">
          <van-badge :content="totalgood" >
         <img :src="saleImg"  style="width:60px" @click="showup=true">
        </van-badge>
        <div  class="app-detail">
            <span class="mb10">￥{{totalprice.toFixed(2)}}</span>
            <span style="font-size:10px">另需配送费￥4元 | 支持自取</span>
          </div>
        <div class="count"  :class="totalgood ?'bgFFC300':''"> {{totalgood ? '去结算':'￥20元起送'}}</div>
     
      </div>
    </div>
    <!-- 遮罩层 -->
<van-overlay :show="show" @click="show = false" id="masking">
  <div class="wrapper" >
  <h3 class="mb15">{{form.name}}</h3>
  <van-rate v-model="value" color="#ffd21e" allow-half  :size="25" gutter="8px" class="mb15"/>
  <van-divider :style="{ color: '#fff', borderColor: '#fff', padding: '0 16px',fontSize:'20px',width:'100%'}">优惠信息</van-divider>
<p class="mb15"><van-tag type="danger" size="medium" style="margin-right:15px">减</van-tag>{{supports1}}</p>
<p class="mb15"><van-tag color="#fff" size="medium" text-color="skyblue" style="margin-right:15px">折</van-tag>{{supports2}}</p>
  <van-divider :style="{ color: '#fff', borderColor: '#fff', padding: '0 16px',fontSize:'20px',width:'100%'}"> 商家公告</van-divider>
<p style="line-height:30px">{{form.bulletin}}</p>
  </div>
</van-overlay>
<!-- 购物车遮罩 -->
<van-popup  v-model="showup" position="bottom" :style="{ height: '50%' }" class="cartinfor">
<shopcar />
</van-popup>
  </div>
</template>
<script>
import { getshopSeller } from '@/apis/merchandise'
import Shopcar from './views/Shopcar'


export default{
  data() {
    return{
      form:'',  //店铺详情
      show:false, //是否显示遮罩层
       value:5,  //评分
       supports1:'', //支持的活动1
       supports2:'', //支持的活动2
       showup:false , //是否显示购物车
       flag:true , //显示去结算还是20起送
      // totalprice:0  //总价
    }
  },
  methods:{
    //点击购物车
showCart(){
    this.showup = !this.showup;   
  }},
  async created(){
let res=await getshopSeller()
res.data.data.avatar=res.data.data.avatar.replace('172.16.7.232','192.168.0.102')
  this.form=res.data.data 
 
  this.value=this.form.score
  this.supports1=this.form.supports[0]
  this.supports2=this.form.supports[1]
  },
  mounted(){
this.$router.push("/");
  },
  computed:{
saleImg(){
//找出所有商品数量>0的数组
for(let obj of this.$store.state.datalist){
  for(let child of obj.foods){
    //把数量大于0的拿过去
    if(child.num>0)
    return require("./assets/imgs/active.png")
  }

}
return require('./assets/imgs/default.png')
},
//所有商品的数量
totalgood(){
  let totalnum=0;
for (let obj of this.$store.state.datalist){
  for(let child of obj.foods){
    totalnum+=child.num
  }
}
return totalnum
},
//计算总价
totalprice(){
  let price=0;
for (let obj of this.$store.state.datalist){
  for(let child of obj.foods){
    price+=child.num*child.price
  }
}
return price
}
  },
  components:{
    Shopcar
  }
}
</script>

<style lang="less">
@fontcolor: {
  color: #fff;
};
.app {
  height: 100%;
  position: relative;
}
.app-header {
  display: flex;
  flex-direction: column;
  height: 130px;
  width: 100%;
  padding-top: 25px;
  .app-header-right {
    margin-left: 15px;
    display: flex;
    width: 70%;
    flex-direction: column;
    color: #fff;
    .app-menu{
width: 80%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

    }
  }
  .app-header-bottom {
    margin-top: 10px;
    background-color:rgba(34, 34, 34, 0.6) ;
   
  }
}
.baseboard{
  background-size:cover;
  filter: blur(10px);
  position: absolute;
  width: 100%;
  z-index: -1;
  top: 0;
  height: 155px;

}
.app-content {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .app-title {
    display: flex;
    justify-content: space-around;
    height: 30px;
    padding: 10px 0;
    a {
      text-decoration: none;
      color: #333;
    }
  }
}
.app-bottom {
  z-index: 2017;
  display: flex;
  width: 100%;
  height: 70px;
  position: fixed;
  bottom: 0px;
    background: rgba(34, 34, 34,0.8);
     align-items: center;
     justify-content: space-between;
  .app-detail {
    color: #fff;
    display:flex;
    flex-direction:column;
    margin-left: 10px;
    height: 100%;
    justify-content: center;
  }
   .count{
    display: flex;
    align-items: center;
    color: #fff;
   justify-content: center;
   height: 100%;
   padding: 0 10px;
  
    }
}
.van-image__error, .van-image__img, .van-image__loading {border-radius: 10px;}
// 遮罩层
#masking{
  z-index: 2018;
}
.wrapper {
    display: flex;
        box-sizing: border-box;
    align-items: center;
    flex-direction: column;
    height: 100%;
    color: #fff;
    padding: 100px 15px ;
     background-color: rgba(55, 64, 71, 0.8)
  }
.cartinfor{
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.app-bottom .bgFFC300{background: #FFC300;font-size: 16px;}
  .mb15{margin-bottom: 15px;}
  .van-badge--fixed{
    top:25px !important;
  
  }
</style>
